<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>滑动验证 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>滑动验证</h1>
  <time datetime=2020-04-25T14:30:35Z class="post-date">Sat, Apr 25, 2020</time>
  <h1 id="滑动验证">滑动验证</h1>
<hr>
<h3 id="1在template">1.在template</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">          &lt;<span style="color:#f92672">drag-verify</span> <span style="color:#f92672">:width</span><span style="color:#e6db74">=&#34;width&#34;</span>
                       <span style="color:#f92672">:height</span><span style="color:#e6db74">=&#34;height&#34;</span>
                       <span style="color:#f92672">:text</span><span style="color:#e6db74">=&#34;text&#34;</span>
                       <span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Verify&#34;</span>&gt;
          <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/drag-verify&gt;</span>
</code></pre></div><hr>
<h3 id="2在script设置属性-npm-install-vue-drag-verify---save">2.在script设置属性 (npm install vue-drag-verify &ndash;save)</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 导包
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">dragVerify</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vue-drag-verify&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
  <span style="color:#a6e22e">data</span> () {
    <span style="color:#66d9ef">return</span> {
      <span style="color:#75715e">// 在data里面设置滑动的属性
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">320</span>,
      <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">42</span>,
      <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;请将滑块拖到最右侧&#39;</span>
    }
  }<span style="color:#960050;background-color:#1e0010">，</span>
  <span style="color:#75715e">// 注册标签
</span><span style="color:#75715e"></span>  <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> {
    <span style="color:#e6db74">&#39;dragVerify&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">dragVerify</span>
  },
  <span style="color:#75715e">//检验是否拖动
</span><span style="color:#75715e"></span>  <span style="color:#a6e22e">methods</span><span style="color:#960050;background-color:#1e0010">：</span>{
      <span style="color:#75715e">//滑块是否拖动false为未拖动至最右侧反之为true
</span><span style="color:#75715e"></span>			<span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">Verify</span>.<span style="color:#a6e22e">isPassing</span> <span style="color:#f92672">==</span> <span style="color:#66d9ef">false</span>){
				<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Notice</span>(<span style="color:#e6db74">&#39;请拖动滑块&#39;</span>)
			}
  }
}
</code></pre></div><h2 id="selenium破解滑块">selenium破解滑块</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#f92672">from</span> selenium <span style="color:#f92672">import</span> webdriver
<span style="color:#f92672">from</span> selenium.webdriver <span style="color:#f92672">import</span> ChromeOptions
<span style="color:#f92672">from</span> selenium.webdriver <span style="color:#f92672">import</span> ActionChains

option <span style="color:#f92672">=</span> ChromeOptions()  <span style="color:#75715e"># 实例化一个ChromeOptions对象</span>
option<span style="color:#f92672">.</span>add_experimental_option(<span style="color:#e6db74">&#39;excludeSwitches&#39;</span>, [<span style="color:#e6db74">&#39;enable-automation&#39;</span>])  <span style="color:#75715e"># 以键值对的形式加入参数</span>
browser <span style="color:#f92672">=</span> webdriver<span style="color:#f92672">.</span>Chrome(options<span style="color:#f92672">=</span>option)
<span style="color:#75715e">#发起请求</span>
browser<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;http://127.0.0.1:8080/login)</span>

<span style="color:#75715e">#定位滑块</span>
button <span style="color:#f92672">=</span> browser<span style="color:#f92672">.</span>find_element_by_class_name(<span style="color:#e6db74">&#34;dv_handler&#34;</span>)
action <span style="color:#f92672">=</span> ActionChains(browser)
<span style="color:#75715e">#获取小球长度</span>
mybutton <span style="color:#f92672">=</span> button<span style="color:#f92672">.</span>size<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;width&#39;</span>)
<span style="color:#75715e">#获取滑块轨道总长</span>
mytext <span style="color:#f92672">=</span> browser<span style="color:#f92672">.</span>find_element_by_class_name(<span style="color:#e6db74">&#39;dv_text&#39;</span>)<span style="color:#f92672">.</span>size<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;width&#39;</span>)
<span style="color:#75715e">#按住拖动</span>
action<span style="color:#f92672">.</span>click_and_hold(button)<span style="color:#f92672">.</span>perform()
<span style="color:#75715e">#拖动位置</span>
action<span style="color:#f92672">.</span>move_by_offset(int(mytext)<span style="color:#f92672">-</span>int(mybutton),<span style="color:#ae81ff">0</span>)<span style="color:#f92672">.</span>perform()
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
